<template>
  <div class="my-registrations">
    <div class="page-header">
      <h2>我的报名</h2>
    </div>

    <!-- 筛选表单 -->
    <el-form :inline="true" :model="queryParams" class="filter-form">
      <el-form-item label="活动标题">
        <el-input v-model="queryParams.activityTitle" placeholder="请输入活动标题" clearable @keyup.enter="handleSearch" />
      </el-form-item>
      <el-form-item label="报名状态">
        <el-select v-model="queryParams.status" placeholder="请选择报名状态" clearable>
          <el-option label="待审核" :value="0" />
          <el-option label="已通过" :value="1" />
          <el-option label="已拒绝" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">
          <el-icon><Search /></el-icon>搜索
        </el-button>
        <el-button @click="resetQuery">
          <el-icon><Refresh /></el-icon>重置
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 列表 -->
    <div class="registration-list">
      <el-empty v-if="registrationList.length === 0" description="暂无报名记录" />
      
      <el-card v-for="item in registrationList" :key="item.id" class="registration-card">
        <div class="registration-header">
          <span class="activity-title">{{ item.activityTitle }}</span>
          <div class="status-tags">
            <el-tag v-if="item.status === 0" type="warning">待审核</el-tag>
            <el-tag v-else-if="item.status === 1" type="success">已通过</el-tag>
            <el-tag v-else-if="item.status === 2" type="danger">已拒绝</el-tag>
            
            <el-tag v-if="item.checkInStatus === 0 && item.status === 1" type="info" class="check-in-tag">未签到</el-tag>
            <el-tag v-if="item.checkInStatus === 1" type="success" class="check-in-tag">已签到</el-tag>
          </div>
        </div>
        
        <div class="registration-info">
          <div class="info-item">
            <span class="label">报名时间：</span>
            <span class="value">{{ item.createTime }}</span>
          </div>
          <div class="info-item">
            <span class="label">审核时间：</span>
            <span class="value">{{ item.auditTime || '尚未审核' }}</span>
          </div>
          <div class="info-item">
            <span class="label">活动时间：</span>
            <span class="value">{{ item.activityStartTime }} 至 {{ item.activityEndTime }}</span>
          </div>
          <div class="info-item">
            <span class="label">活动地点：</span>
            <span class="value">{{ item.activityLocation }}</span>
          </div>
        </div>
        
        <div class="registration-actions">
          <el-button type="primary" link @click="viewActivityDetail(item.activityId)">
            查看活动详情
          </el-button>
          <el-button v-if="item.status === 0" type="danger" link @click="handleCancel(item)">
            取消报名
          </el-button>
        </div>
      </el-card>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="queryParams.pageNum"
        v-model:page-size="queryParams.pageSize"
        :total="total"
        :page-sizes="[10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Search, Refresh } from '@element-plus/icons-vue'
import { getUserRegistrations, cancelRegistration } from '@/api/registration'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()

// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  activityTitle: '',
  status: null
})

const registrationList = ref([])
const total = ref(0)

// 获取用户报名列表
const getList = async () => {
  try {
    const res = await getUserRegistrations(queryParams)
    registrationList.value = res.data.list
    total.value = res.data.total
  } catch (error) {
    console.error('获取报名列表失败', error)
    ElMessage.error('获取报名列表失败')
  }
}

// 搜索
const handleSearch = () => {
  queryParams.pageNum = 1
  getList()
}

// 重置查询
const resetQuery = () => {
  queryParams.activityTitle = ''
  queryParams.status = null
  handleSearch()
}

// 查看活动详情
const viewActivityDetail = (activityId) => {
  router.push({
    path: '/activity-detail',
    query: { id: activityId }
  })
}

// 取消报名
const handleCancel = (row) => {
  ElMessageBox.confirm('确认取消该报名申请?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      await cancelRegistration(row.id)
      ElMessage.success('取消报名成功')
      getList()
    } catch (error) {
      console.error('取消报名失败', error)
      ElMessage.error('取消报名失败')
    }
  }).catch(() => {})
}

// 分页大小变化
const handleSizeChange = (size) => {
  queryParams.pageSize = size
  getList()
}

// 页码变化
const handleCurrentChange = (page) => {
  queryParams.pageNum = page
  getList()
}

onMounted(() => {
  getList()
})
</script>

<style scoped>
.my-registrations {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.filter-form {
  margin-bottom: 20px;
  padding: 18px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.registration-list {
  margin-bottom: 20px;
}

.registration-card {
  margin-bottom: 16px;
  border-radius: 8px;
  transition: all 0.3s;
}

.registration-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.registration-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.activity-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.status-tags {
  display: flex;
  gap: 8px;
}

.check-in-tag {
  margin-left: 8px;
}

.registration-info {
  margin-bottom: 15px;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.info-item {
  display: flex;
  margin-bottom: 8px;
  font-size: 14px;
  color: #606266;
}

.info-item:last-child {
  margin-bottom: 0;
}

.label {
  width: 100px;
  color: #909399;
}

.registration-actions {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .registration-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .info-item {
    flex-direction: column;
    margin-bottom: 12px;
  }
  
  .label {
    width: 100%;
    margin-bottom: 4px;
  }
}
</style> 